<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            width: 60px;
            height: 30px;
            float: left;
            border: 1px solid pink;
            outline: none;
        }
        span{
            float: left;
            width: 62px;
            height: 32px;
            background: pink;
            text-align: center;
            line-height: 30px;
        }
        button{
            float: left;
            width: 40px;
            height: 32px;
            outline: none;
            /* border: 1px solid pink; */
            /* background: pink; */
            border: none;
        }
    </style>
</head>
<body>
    <span id="span"></span>
    <input type="text" id="ip"/>
    <button id='btn'>验证</button>
    <script>
        var str = '0123456789qazwsxedcrfvtgbyhnujmikolpQAZWSXEDCRFVTGBYHNUJMIKOLP'
        var key = '';
        for(var i=0 ; i<4;i++){
            var k = Math.floor(Math.random()*str.length)
            key += str[k];
            }
            document.querySelector('span').innerHTML = key  
            document.getElementById('span').onclick = function(){
            key = ''; 
            for(var i=0 ; i<4;i++){
            var k = Math.floor(Math.random()*str.length)
            key += str[k];
            }
            document.querySelector('span').innerHTML = key
        }

        btn.onclick = function(){
            var ip = document.getElementById('ip');
            var span = document.getElementById('span')
            span = span.innerHTML;
            var btn = document.getElementById('btn');
            ip = ip.value;
            var ip1 = ip.toLowerCase();
            var span1 = span.toLowerCase();
            if(ip1 == span1){
                alert('验证成功')
            }else{
                alert('验证错误')
                key = ''; 
                for(var i=0 ; i<4;i++){
                var k = Math.floor(Math.random()*str.length)
                key += str[k];
                }
                document.querySelector('span').innerHTML = key
                }
        }
        
        

    </script>
</body>
</html>